/*
 * @Author: xiaosihan
 * @Date: 2021-03-28 18:47:55
 * @Last Modified by: xiaosihan
 * @Last Modified time: 2021-08-08 21:27:10
 */

import * as React from "react";
import ReactDOM from "react-dom";
import * as THREE from "three";
import { OrbitControls } from "three/examples/jsm/controls/OrbitControls";
import Clothes from "./component/Clothes/Clothes";
import styles from "./Dev.less";
import GlowBall from "./component/GlowBall";
import LightColumn from "./component/LightColumn";

interface Props { }

interface State { }

export default class Dev extends React.Component<Props, State> {
    constructor(props: Props) {
        super(props);
    }

    // 渲染器
    renderer = (() => {
        let renderer = new THREE.WebGLRenderer({
            alpha: true,// 透明背景
            antialias: true, // 阴影抗锯齿
            precision: "highp", //precision:highp/mediump/lowp着色精度选择
            // logarithmicDepthBuffer: true, // 对数深度缓冲区 避免当2个面完全重合时闪烁
            preserveDrawingBuffer: false, // 是否保存绘图缓冲
            stencil: false, // 模版
        });
        // 设置分辨率
        renderer.setPixelRatio(window.devicePixelRatio);
        //全局关闭阴影
        renderer.shadowMap.enabled = true;
        renderer.shadowMap.type = THREE.BasicShadowMap;
        // 开启全局裁剪
        renderer.localClippingEnabled = true;
        return renderer;
    })();

    //场景
    scene = new THREE.Scene();

    //相机
    camera = (() => {
        let camera = new THREE.PerspectiveCamera(50, 400 / 300, 0.01, 2000);
        camera.position.set(3, 3, 3);
        camera.updateProjectionMatrix();
        return camera;
    })();


    // 轨道控制器
    controls = new OrbitControls(this.camera, this.renderer.domElement);

    loop = setInterval(() => {
        this.camera.lookAt(this.scene.position);
        this.renderer.render(this.scene, this.camera);
    }, 30);

    componentDidMount() {

        ReactDOM.findDOMNode(this)!.appendChild(this.renderer.domElement);

        this.renderer.setSize(800, 600);

        this.scene.add(new THREE.AxesHelper(10));

        // 添加一个辉光小球
        // let glowball1 = new GlowBall("#ff0");
        // glowball1.position.set(2, 0, 0);
        // this.scene.add(glowball1);

        // // 添加一个辉光小球
        // let glowball2 = new GlowBall("#f0f");
        // glowball2.position.set(-2, 0, 0);
        // this.scene.add(glowball2);

        // 光柱
        // let lightColumn = new LightColumn();
        // lightColumn.setColor("#043592");
        // lightColumn.position.set(0, 0, 0);
        // lightColumn.scale.set(1, 1, 1);
        // this.scene.add(lightColumn);

        // let lightColumn1 = new LightColumn();
        // lightColumn1.setColor("#f00");
        // lightColumn1.position.set(1, 0, 0);
        // lightColumn1.scale.set(1, 1, 1);
        // this.scene.add(lightColumn1);

        // 衣服
        // this.scene.add(Clothes);
        // Clothes.initFabricCanvas("textureCanvas");

        // 点光源
        let pointerLight = new THREE.PointLight("#fff");
        pointerLight.position.set(0, 0, 4);
        this.scene.add(pointerLight);

        let pointerLight2 = new THREE.PointLight("#fff");
        pointerLight2.position.set(0, 1, -5);
        this.scene.add(pointerLight2);

    }

    componentWillUnmount() {
        this.renderer.forceContextLoss();
        clearInterval(this.loop);
    }

    render() {
        return (
            <div className={styles.dev}>

                {/* <canvas
                    id="textureCanvas"
                    width="512"
                    height="512"
                    style={{ border: "1px solid #2993cc" }}
                /> */}

            </div>
        );
    }
}